<template>
  <mt-navbar title="活动详情">
    <template v-if="type === 2" #right>
      <image
        class="w-48rpx h-48rpx"
        src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity1.svg"
        @click="openShare"
      ></image>
    </template>
  </mt-navbar>
  <view v-if="detailInfo" class="safety-150 px-32rpx pt-24rpx min-h-100vh bg-#ffffff">
    <view class="relative h-400rpx mb-40rpx">
      <uv-swiper
        :list="detailInfo.coverFile"
        key-name="url"
        indicator-style="right: 20rpx"
        :autoplay="false"
        circular
        height="400rpx"
        @change="(e) => (swiperCurrent = e.current)"
      >
        <!-- <template #indicator>
          <view class="bg-[rgba(0,0,0,0.55)] px-18rpx pb-8rpx rd-30rpx">
            <text class="text-24rpx text-#ffffff line-height-24rpx">{{ swiperCurrent + 1 }}/{{ detailInfo.coverFile.length }}</text>
          </view>
        </template> -->
      </uv-swiper>
      <view
        class="bg-[rgba(0,0,0,0.55)] absolute right-0 top-0 px-24rpx py-16rpx text-28rpx text-#ffffff z-2"
        :class="{ redbg: detailInfo.warningTime.d <= 2 }"
        style="border-radius: 0 0 0 40rpx"
      >
        <text v-if="detailInfo.warningTime.d > 30">{{ dayjs(detailInfo.warningTime.endtime).format('YYYY-MM-DD') }}截止</text>
        <text v-if="detailInfo.warningTime.d > 2 && detailInfo.warningTime.d <= 30">距报名截止：{{ detailInfo.warningTime.d }}天</text>
        <text v-if="detailInfo.warningTime.d >= 1 && detailInfo.warningTime.d <= 2">距报名截止：{{ detailInfo.warningTime.d }}天</text>
        <text v-if="detailInfo.warningTime.d < 1 && detailInfo.warningTime.h > 0">距报名截止：{{ detailInfo.warningTime.h }}小时</text>
        <text v-if="detailInfo.warningTime.d < 1 && detailInfo.warningTime.h < 1 && detailInfo.warningTime.m > 0"
          >距报名截止：{{ detailInfo.warningTime.m }}分钟</text
        >
      </view>
    </view>
    <view class="text-40rpx text-#1C213E font-bold mb-32rpx">{{ detailInfo.activityName }}</view>
    <view class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity3.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">活动主题</view>
        <view class="text-28rpx text-#1C213E">{{ detailInfo.activityType }}</view>
      </view>
    </view>
    <view class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity4.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">活动时间</view>
        <view class="text-28rpx text-#1C213E"
          >{{ dayjs(detailInfo.startTime).format('YYYY-MM-DD HH:mm') }} - {{ dayjs(detailInfo.endTime).format('YYYY-MM-DD HH:mm') }}</view
        >
      </view>
    </view>
    <view v-if="detailInfo.addressShowStatus === 1" class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity6.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">地址</view>
        <view class="text-28rpx text-#1C213E">{{ detailInfo.province }}{{ detailInfo.city }}{{ detailInfo.address }}</view>
      </view>
    </view>
    <view v-if="detailInfo.recentSignUpList?.length" class="flex items-center mb-24rpx">
      <view class="text-24rpx text-#ADB0BD mr-24rpx">近期{{ detailInfo.recentSignUpList.length }}人报名</view>
      <view class="relative h-40rpx">
        <image
          v-for="(item, index) in detailInfo.recentSignUpList.slice(0, 6)"
          :key="item.id"
          class="circle"
          :style="{ left: index * 30 + 'rpx' }"
          :src="item.avatarUrl ? item.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'"
        ></image>
      </view>
    </view>
    <view class="text-32rpx text-#1C213E font-bold mb-24rpx mt-60rpx">活动描述</view>
    <view class="text-28rpx text-#727687">{{ detailInfo.remark }}</view>
    <view class="text-32rpx text-#1C213E font-bold mb-24rpx mt-60rpx">日程安排</view>
    <view v-if="detailInfo.scheduleFile" class="mb-14rpx">
      <image v-for="(item, index) in detailInfo.scheduleFile" :key="index" class="w-full h-auto mb-10rpx" mode="widthFix" :src="item.url"></image>
    </view>

    <view v-if="type === 1" class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="flex-1" :shake="false" @click="goSign"> 立即报名 </mt-button>
    </view>
  </view>
</template>

<script setup>
import { activitygetAppActivityDetail } from '@/subActivity/api/index';
import { activityappgetShareUrlLink } from '@/api/mixed';
import { openAppShare } from '@/utils/tools';
import dayjs from 'dayjs';

function goSign() {
  const activityRightsList = JSON.parse(JSON.stringify(detailInfo.value.activityRightsList));
  uni.setStorageSync('interests', {
    activityRightsList: activityRightsList
  });

  uni.navigateTo({
    url: `/subActivity/pages/serviceSign?id=${detailInfo.value.id}&type=1`
  });
}
const shareFlag = ref(true);
async function openShare() {
  if (!shareFlag.value) return;

  shareFlag.value = false;

  await getShareLink();
  // #ifdef APP
  openAppShare({
    href: shareUrl.value,
    title: detailInfo.value.activityName,
    summary: detailInfo.value.activityType,
    imageUrl: detailInfo.value.coverFile[0].url,
    success: (e) => {
      shareFlag.value = true;
      if (e.event === 'clickMenu' && e.menu[e.index].share === 'custom') {
        // 点击的生成海报
        openPoster();
      }
    }
  });
  // #endif

  // #ifndef APP
  openPoster();
  // #endif
}

function openPoster() {
  uni.setStorageSync('poster', {
    bgImg: detailInfo.value.posterFile[0].url,
    qrcodeText: shareUrl.value,
    qrcodeImg: qrcodeUrl.value
  });
  shareFlag.value = true;
  uni.navigateTo({
    url: '/subActivity/pages/poster'
  });
}

const swiperCurrent = ref(0);
const detailInfo = ref(null);
function getDetail() {
  activitygetAppActivityDetail({ id: id.value }).then((res) => {
    const obj = res.data;
    if (type.value === 1) {
      obj.warningTime = handleTime(obj.serviceProviderDeadline);
    } else if (type.value === 2) {
      obj.warningTime = handleTime(obj.customerDeadline);
    }

    detailInfo.value = obj;
  });
}

function handleTime(endtime) {
  const obj = {
    endtime,
    d: 0,
    h: 0,
    m: 0,
    s: 0
  };

  const targetDate = new Date(endtime).getTime();
  const now = new Date().getTime();

  if (now > targetDate) {
    return obj;
  }

  const timeDifference = targetDate - now;

  obj.d = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  obj.h = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  obj.m = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  obj.s = Math.floor((timeDifference % (1000 * 60)) / 1000);

  return obj;
}

const shareUrl = ref('');
const qrcodeUrl = ref('');
async function getShareLink() {
  const res = await activityappgetShareUrlLink({ activityId: id.value, path: '/subActivity/pages/activityDetail' });
  shareUrl.value = res.data;
}

const id = ref('');
const type = ref(1); // 1 活动报名 2 活动分享
onLoad((options) => {
  id.value = options.id;
  type.value = Number(options.type);
  getDetail();
});

onShow(() => {
  shareFlag.value = true;
});

onUnload(() => {
  uni.removeStorage({
    key: 'interests'
  });
  uni.removeStorage({
    key: 'poster'
  });
});
</script>

<style lang="scss" scoped>
.circle {
  position: absolute;
  top: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: #ffffff;
  border: 2rpx solid #e6e6e6;
  border-radius: 80rpx;
}
.redbg {
  background-color: #f94b4a !important;
}
</style>
